<template>
	<view>
		<view class="formModel">
			<view class="cu-form-group">
				<view  class="title">车牌号</view>
				<input  disabled="true"  placeholder="桂A358411" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">沼液池编号</view>
				<input  disabled="true"  :placeholder="'沼液池:'+poolIndex" name="input"></input>
			</view>
		</view>
		<template v-if="isList">
		      <block v-for=" (item,index) in carNumList" :key="index">
				<view class="formModel" style="margin-top: 10rpx;">
					<view @tap="ifShow(index)" class="cu-form-group">
						<view  class="title">处理批次号</view>
						<input  disabled="true"  :placeholder="item.pool_number" name="input"></input>
					    <text v-if="ind === index?ifshow:''" class="icon iconfont">&#xe601;</text>
					    <text v-else class="icon iconfont">&#xe600;</text>
					</view>
					<template v-if="ind === index?ifshow:''">
					<view class="cu-form-group">
						<view  class="title">运输目的地</view>
						<input  disabled="true"  :placeholder="item.transportation_destination" name="input"></input>
					</view>
					<view class="cu-form-group">
						<view  class="title">运输重量</view>
						<input  disabled="true"  :placeholder="item.transportation_weight" name="input"></input>
					    <text style="font-size:30rpx;">KG</text>
					</view>
					<view class="cu-form-group">
						<view  class="title">运输状态</view>
						<input  disabled="true" :placeholder="item.transportation_status" name="input"></input>
					</view>
					<view class="cu-form-group">
						<view  class="title">车辆到达时间</view>
						<input   disabled="true" :placeholder="item.car_arrive_time" name="input"></input>
					</view>
					<view class="cu-form-group">
						<view  class="title">运输结束时间</view>
						<input disabled="true" :placeholder="item.transportation_end_time"  name="input"></input>
					</view>
					<view class="cu-form-group">
						<view  class="title">登记人</view>
						<input  disabled="true"  :placeholder="item.registrant_name" name="input"></input>
					</view>
					<view class="cu-form-group">
						<view  class="title">联系方式</view>
						<input  disabled="true"  :placeholder="item.registrant_phone" name="input"></input>
					</view>
					</template>
				</view>
				</block>
			</template>	
			<template v-else>
			<no-thing style="background-color:#f8f8fc;"></no-thing>
			</template>
				<!-- 抽屉 -->
				<uni-drawer :visible="showRight" mode="right" @close="closeDrawer('right')">
					<!-- #ifndef MP-BAIDU || MP-ALIPAY || MP-TOUTIAO -->
					<uni-list>
						<block v-for="(item1,index1) in pool_id" :key="index1">
						<uni-list-item @tap="getCarNumInfo(item1.pool_id)" :title="'沼液池：'+item1.pool_id" />
						</block>
					</uni-list>
					<!-- #endif -->
					<!-- #ifdef MP-BAIDU || MP-ALIPAY || MP-TOUTIAO -->
					<!-- <view class="uni-list">
						<uni-list-item title="Item1" />
						<uni-list-item title="Item2" />
						<uni-list-item class="last-list-item" :show-badge="true" title="Item3" badge-text="12" />
					</view> -->
					<!-- #endif -->
					<view class="close">
						<view class="word-btn" hover-class="word-btn--hover" :hover-start-time="20" :hover-stay-time="70" @click="hide"><text class="word-btn-white">Close</text></view>
					</view>
				</uni-drawer>
	</view>
</template>
<script>
	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue'
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import noThing from "../../../components/common/no-thing.vue"
	export default {
		components: {
			uniIcons,
			uniDrawer,
			uniList,
			uniListItem,
			noThing
		},
		data() {
			return {
				showRight: false,
				showLeft: false,
				ifshow:false,
				license_plate:'',//车牌号
				carNumList:'',
				ind:'',
				time:'',
				pool_id:'',//沼液池编号,
				poolIndex:'',//当前沼液池
				isList:true,//是否查到数据
			}
		},
		onNavigationBarButtonTap() {
			this.show('right')
		},
		onLoad(option) {
			// console.log(option.license_plate)
			this.license_plate = option.license_plate;
		    this.farmId = option.farmId
		},
		onReady(){
			this.getCarNumInfo(this.pool_id[0]);
			this.getPoolId()
		},
		methods: {
			//获取养殖签约车辆车牌号运输记录
			getCarNumInfo(pool_id){
				// console.log(this.farmId)
				uni.request({
					url:this.confige.webUrl+"/filing/selectZfTwoCarInfo",
					data:{
						car_number:this.license_plate,
						pool_id:pool_id,
						farm_id:this.farmId
					},
					header:{
						'X-Token':this.User.token
					},
					success: (res) => {
						console.log(res)
						if(res.data.code==200){
						this.carNumList = res.data.result;
						this.isList = true;
						this.poolIndex = res.data.result[0].pool_id;
						}
						else if(res.data.code==400){
							this.isList = false;
						}
					}
				})
			},
			//获取养殖场的沼液池
			getPoolId(){
				console.log(this.farmId)
				uni.request({
					url:this.confige.webUrl+"/filing/selectPoolId",
					data:{
						farm_id:this.farmId
					},
					header:{
						'X-Token':this.User.token
					},
					success: (res) => {
						console.log(res)
						let list = res.data.result;
						let arr = [];
						for(let i=0;i<list.length;i++){
							arr.push({
								pool_id:list[i].pool_id
							})
						}
						this.pool_id = arr;
						// this.pool_id = arr;
					}
				})
			},
			//是否显示
			ifShow(index){
				this.ind = index;
				console.log(index)
				this.ifshow = !this.ifshow;
			},
			show(e) {
				console.log("show", e);
				if (e === 'left') {
					this.showLeft = true
				} else {
					this.showRight = true
				}
			},
			hide() {
				console.log("hide");
				this.showLeft = false
				this.showRight = false
			},
			closeDrawer(e) {
				if (e === 'left') {
					this.showLeft = false
				} else {
					this.showRight = false
				}
			},
		},
		onNavigationBarButtonTap(e) {
			this.showRight = !this.showRight
		},
		onBackPress() {
			if (this.showRight || this.showLeft) {
				this.hide()
				return true
			}
		}
	}
</script>

<style>
	@import "../../../common/global.less";
	@import "../../../common/main.css";
	@import "../../../common/colorui/icon.css";
	@import "../../../common/iconfont.css";
	@import "../../../common/iconReg.css" ;
	/* 头条小程序组件内不能引入字体 */
	.bottomModel{
	margin-top: 50rpx;
	}
	.formModel{
	.cu-form-group {
	.title {min-width: calc(4em + 15px);}		
	}
	}
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}

	/* #endif */

	/* #ifndef APP-NVUE */
	page {
		/* display: flex;
		flex-direction: column;
		box-sizing: border-box; */
		background-color: #efeff4;
	/* 	min-height: 100%;
		height: auto; */
	}

/* 	view {
		font-size: 14px;
		line-height: inherit;
	} */

	.example {
		padding: 0 15px 15px;
	}

	.example-info {
		padding: 15px;
		color: #3b4144;
		background: #ffffff;
	}

	.example-body {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}

	/* #endif */
	.example {
		padding: 0 15px;
	}

	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}

	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}


	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 30rpx;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6rpx;
		height: 60rpx;
		font-size: 25rpx;
		width: 100%;
		/* margin:0rpx 34rpx; */
		background-color: #4AC997;
		
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}


	.header {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 10px 15px;
		align-items: center;
		border-top-width: 1px;
		border-top-color: #f5f5f5;
		border-top-style: solid;
		background-color: #ffffff;
	}

	.input-view {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		flex-direction: row;
		background-color: #e7e7e7;
		height: 30px;
		border-radius: 15px;
		padding: 0 10px;
		flex: 1;
		background-color: #f5f5f5;
	}

	.uni-drawer-info {
		background-color: #ffffff;
		padding: 30rpx;
		padding-top: 10rpx;
		color: #3b4144;
	}

	.uni-padding-wrap {
		padding: 0 15px;
		line-height: 1.8;
	}

	.input {
		flex: 1;
		padding: 0 5px;
		height: 24px;
		line-height: 24px;
		font-size: 28rpx;
		background-color: transparent;
	}

	.close {
		padding: 30rpx;
		position:fixed;
		bottom: 0;
		width: 100%;
	}
   
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 0;
	}

	.draw-cotrol-btn {
		flex: 1;
	}
</style>